<template>
  <div class="menu">
    <div class="header">
      <div class="left">
        <div class="title">菜单管理</div>
        <div class="button">
          <el-button icon="el-icon-edit">编辑</el-button>
          <el-button icon="el-icon-delete">删除</el-button>
          <el-button icon="el-icon-plus" @click="maskShow = true"
            >新增</el-button
          >
          <el-button icon="el-icon-edit">编辑</el-button>
          <el-button icon="el-icon-delete">删除</el-button>
        </div>
      </div>
      <div class="right">
        <search-input v-model="searchValue"></search-input>
      </div>
    </div>
    <div class="container">
      <div class="left">
        <div class="list">
          <el-collapse v-model="actives" @change="handleChange">
            <el-collapse-item
              title="第一组"
              name="1"
              :class="actives.includes('1') ? 'active' : ''"
            >
              <div>学员1</div>
              <div>学员2</div>
              <div>学员2</div>
            </el-collapse-item>
            <el-collapse-item
              title="第二组"
              name="2"
              :class="actives.includes('2') ? 'active' : ''"
            >
              <div>学员1</div>
              <div>学员2</div>
              <div>学员2</div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
      <div class="right">
        <el-table
          ref="tableData"
          :data="tableData"
          style="width: 100%"
          max-height="500"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" align="center"> </el-table-column>
          <el-table-column prop="deviceName" label="设备名" align="center">
          </el-table-column>
          <el-table-column prop="frequency" label="频率" align="center">
          </el-table-column>
          <el-table-column
            prop="resolutionRatio"
            label="分辨率"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="params"
            label="参数"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="status"
            label="状态"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column label="操作" align="center" show-overflow-tooltip>
            <i
              class="el-icon-edit"
              style="
                font-size: 24px;
                color: #365eff;
                margin-right: 16px;
                cursor: pointer;
              "
            ></i>
            <i
              class="el-icon-delete"
              style="font-size: 24px; color: red; cursor: pointer"
            ></i>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="footer">
      <Pagination :total="50"></Pagination>
    </div>
    <transition name="el-fade-in-linear">
      <div v-if="maskShow" class="transition-box mask">
        <div class="form">
          <div class="title">添加设备</div>
          <el-form label-position="top" label-width="80px" :model="addForm">
            <el-form-item label="设备名">
              <el-input
                v-model="addForm.deviceName"
                placeholder="请输入设备名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="频率">
              <el-input
                v-model="addForm.frequency"
                placeholder="请输入频率"
              ></el-input>
            </el-form-item>
            <el-form-item label="分辨率">
              <el-input
                v-model="addForm.resolutionRatio"
                placeholder="请输入分辨率"
              ></el-input>
            </el-form-item>
            <el-form-item label="参数">
              <el-input
                v-model="addForm.params"
                placeholder="请输入参数"
              ></el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-switch v-model="addForm.status"></el-switch>
            </el-form-item>
          </el-form>
          <div class="button">
            <el-button type="info" @click="maskShow = false">取消</el-button>
            <el-button type="primary" @click="save">保存</el-button>
          </div>
        </div>
      </div>
    </transition>

    <success-tip v-if="success"></success-tip>
  </div>
</template>

<script>
export default {
  name: "Menu",
  data() {
    return {
      searchValue: "",
      drawer: false,
      maskShow: false,
      addForm: {
        deviceName: "扫码枪",
        frequency: "频率",
        resolutionRatio: "分辨率",
        params: "参数",
        status: false,
      },
      success: false,
      actives: [],
      tableData: [
        {
          deviceName: "测试",
          frequency: "频率",
          resolutionRatio: "分辨率",
          params: "参数",
          status: "状态",
        },
        {
          deviceName: "测试",
          frequency: "频率",
          resolutionRatio: "分辨率",
          params: "参数",
          status: "状态",
        },
        {
          deviceName: "测试",
          frequency: "频率",
          resolutionRatio: "分辨率",
          params: "参数",
          status: "状态",
        },
        {
          deviceName: "测试",
          frequency: "频率",
          resolutionRatio: "分辨率",
          params: "参数",
          status: "状态",
        },
        {
          deviceName: "测试",
          frequency: "频率",
          resolutionRatio: "分辨率",
          params: "参数",
          status: "状态",
        },
        {
          deviceName: "测试",
          frequency: "频率",
          resolutionRatio: "分辨率",
          params: "参数",
          status: "状态",
        },
        {
          deviceName: "测试",
          frequency: "频率",
          resolutionRatio: "分辨率",
          params: "参数",
          status: "状态",
        },
        {
          deviceName: "测试",
          frequency: "频率",
          resolutionRatio: "分辨率",
          params: "参数",
          status: "状态",
        },
        {
          deviceName: "测试",
          frequency: "频率",
          resolutionRatio: "分辨率",
          params: "参数",
          status: "状态",
        },
        {
          deviceName: "测试",
          frequency: "频率",
          resolutionRatio: "分辨率",
          params: "参数",
          status: "状态",
        },
      ],
    };
  },
  methods: {
    save() {
      this.maskShow = false;
      setTimeout(() => {
        this.success = true;
        setTimeout(() => (this.success = false), 1000);
      }, 200);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleChange(val) {
      console.log(val.length);
      console.log(val.includes("1"));
    },
  },
};
</script>
<style lang="scss">
.menu {
  position: relative;
  padding: 36px 42px;

  .header {
    display: flex;
    justify-content: space-between;

    .left {
      .title {
        height: 26px;
        line-height: 26px;
        font-size: 26px;
        color: #333333;
      }

      .button {
        margin-top: 36px;
        display: flex;
        height: 48px;

        .el-button {
          font-size: 16px;
          font-weight: bold;
          width: 112px;
          height: 48px;
          border-radius: 12px;
          border: 1px solid #e4e4e4;
        }

        .el-button + .el-button {
          margin-left: 30px;
        }
      }
    }

    .right {
      height: 66px;
      line-height: 66px;
    }
  }

  .container {
    margin-top: 24px;
    display: flex;
    justify-content: space-between;
    width: 100%;

    .left {
      padding: 24px 40px 30px;
      width: 20%;
      background: #ffffff;
      box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.04);
      border-radius: 20px;
      overflow: hidden;

      .list {
        width: 100%;
        height: 714px;
        overflow: hidden;

        .el-collapse {
          border-color: #f7f7f7;

          .el-collapse-item {
            .el-collapse-item__header {
              font-size: 18px;
              border-color: #f7f7f7;
            }

            .el-collapse-item__content {
              margin-top: 10px;

              div {
                cursor: pointer;
                padding-left: 20px;
                height: 16px;
                line-height: 16px;
                font-size: 16px;
                text-align: left;
              }

              div + div {
                margin-top: 16px;
              }
            }

            .el-collapse-item__wrap {
              border-color: #f7f7f7;
            }
          }

          .active {
            .el-collapse-item__header {
              color: #365eff;
            }
          }
        }
      }
    }

    .right {
      width: 78%;
      background: #ffffff;
      box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.04);
      border-radius: 20px;
      overflow: hidden;

      .el-table {
        font-size: 16px;

        &::before {
          height: 0;
        }

        .el-table__header-wrapper {
          .el-table__header th {
            padding: 0;
            height: 84px;
            line-height: 84px;
            background-color: #f7faff;
            font-size: 18px;
            border: none;
          }
        }

        .el-table__body-wrapper tr {
          height: 80px;

          &:hover {
            td.el-table__cell {
              box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.06);
              background: #ffffff;
            }
          }
        }
      }
    }
  }

  .mask {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    background-color: rgba($color: #000000, $alpha: 0.5);

    .form {
      position: absolute;
      top: calc(50% - 243px);
      left: calc(50% - 308px);
      width: 616px;
      height: 486px;
      background: #ffffff;
      border-radius: 24px;
      overflow: hidden;

      .title {
        margin: 24px;
        height: 20px;
        line-height: 20px;
        font-size: 20px;
        font-weight: 500;
        color: #333333;
      }

      .el-form {
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 568px;
        height: 304px;

        .el-form-item {
          margin: 0;
          padding: 0 30px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          width: 274px;
          height: 88px;
          background: #f7f7f7;
          border-radius: 12px;

          .el-form-item__label {
            padding: 0;
            line-height: 14px;
            font-weight: 400;
            color: #666;
          }

          .el-form-item__content {
            height: 20px;
            line-height: 20px;

            .el-input {
              .el-input__inner {
                padding: 0;
                height: 20px;
                width: 100%;
                line-height: 20px;
                border: none;
                border-radius: 0;
                background-color: #f7f7f7;
                font-size: 16px;
                font-weight: 500;
                color: #333;
              }
            }
          }
        }
      }

      .button {
        margin-top: 30px;
        padding: 0 64px;
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 48px;

        .el-button {
          width: 204px;
          height: 48px;
          border-radius: 12px;
        }
      }
    }
  }
}
</style>
